'use strict'
import React, {Component} from 'react';
import {connect} from 'dva';
import styles from './Study.css';
import {Button} from "antd-mobile";
import {Route} from 'dva/router';
import TestQuiz from "../../components/TestQuiz/TestQuiz";
import {withRouter} from "react-router-dom";

@withRouter
class Study extends Component {

  UNSAFE_componentWillMount() {
    this.props.dispatch({type: 'study/testResults'});
  }

  render() {
    return (
      <div>
        <Route path={"/study"} exact component={_ => <div className={styles.normal}>
          <Button type={'primary'} onClick={this.gotoTest}>开始测试</Button>
          <ul className={styles.list}>
            {
              this.props.data.map(({testCode = 0, startTime = ''}, index) => {
                return <li key={'' + index} className={styles.li}>
                  <div style={{
                    display: 'flex',
                    justifyContent: 'space-around',
                    padding: '15px 0px',
                  }}>
                    <div>
                      {`第${index + 1}次:`}
                    </div>
                    <div>
                      <span style={{fontSize: '30px', color: 'rgb(255, 110, 39)'}}>{testCode}</span>分
                    </div>
                    <div style={{marginBottom: '8px', fontWeight: 'bold'}}>{`${startTime}`}</div>
                  </div>
                </li>;
              })
            }
          </ul>
        </div>}/>
        <Route path={"/study/weektest"} component={_ => <TestQuiz type={2}/>} exact/>
      </div>
    );
  }

  gotoTest = _ => {
    //首次测试拉取题目,todo 周测后面这里加if else 拉取周测题目
    this.props.dispatch({type: 'quiz/fetchTimus', body: {tmSource: {type: 2}}});
    this.props.history.push('/study/weektest');
  }
}

Study.propTypes = {};

const opts = ({study, quiz}) => {
  const {testRecords = []} = study || {};
  const {quizList = []} = quiz || {};
  return {data: testRecords, quizList};
};
export default connect(opts)(Study);
